<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>酒店管理系统</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


</head>

<body>

<div class="container my-2">
    <h1 th:align="center" th:color="blue"> 酒店管理系统 </h1>
    <a th:href="@{/showNewHotelForm}" th:color="green" class="btn btn-primary btn-sm mb-3"> 添加信息 </a>


    <h3>查找名字</h3>
    <form id="query-form" action="/query" method="get">
        <input type="text" id="name-input" name="inpname" placeholder="RoomNo">
        <button type="button" onclick="queryStudent()">query</button>
    </form>
<!--    将输入框输入的内容传到url上面去-->
    <script>
        function queryStudent() {
            var name = document.getElementById("name-input").value;
            var url = "/query" + encodeURIComponent(name);
            window.location.href = url;
        }
    </script>

    <br>
    <table border="1" class="table table-striped table-responsive-md">
        <thead>
        <tr>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=RoomNo&sortDir=' + ${reverseSortDir}}">
                    房间号</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=RoomType&sortDir=' + ${reverseSortDir}}">
                    房间类型</a>
            </th>
            <th>
                <a th:href="@{'/page/' + ${currentPage} + '?sortField=Price&sortDir=' + ${reverseSortDir}}">
                    价格</a>
            </th>


            <th> 操作 </th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="Hotel : ${listHotel}">
            <td th:text="${Hotel.RoomNo}"></td>
            <td th:text="${Hotel.RoomType}"></td>
            <td th:text="${Hotel.Price}"></td>
            <td> <a th:href="@{/showNewHotelUpdate{id}(id=${Hotel.id})}" class="btn btn-primary">修改</a>
                <a th:href="@{/deleteHotel{id}(id=${Hotel.id})}" class="btn btn-danger">删除</a>
            </td>
        </tr>
        </tbody>
    </table>

    <div th:if = "${totalPages > 1}">
        <div class = "row col-sm-10">
            <div class = "col-sm-3">
                数据条目 : [[${totalItems}]]
            </div>
            <div class = "col-sm-5">
					<span th:each="i: ${#numbers.sequence(1, totalPages)}">
						<a th:if="${currentPage != i}" th:href="@{'/page/' + ${i}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">[[${i}]]</a>
						<span th:unless="${currentPage != i}">[[${i}]]</span>  &nbsp; &nbsp;
					</span>
            </div>
            <div class = "col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${currentPage + 1}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Next</a>
                <span th:unless="${currentPage < totalPages}">下一页</span>
            </div>

            <div class="col-sm-1">
                <a th:if="${currentPage < totalPages}" th:href="@{'/page/' + ${totalPages}+ '?sortField=' + ${sortField} + '&sortDir=' + ${sortDir}}">Last</a>
                <span th:unless="${currentPage < totalPages}">最后一页</span>
            </div>
        </div>
    </div>

</div>

<a th:href="@{/}" th:color="red" class="btn btn-primary btn-sm mb-3"> 返回首页 </a>
</body>

</html>